<template>
  <div class="template-container" style="width:100%;">
    <el-form :inline="true" class="query-form" size="medium" label-width="90px"> </el-form>
    <el-row>
      <el-col :span="24">
        <vxe-grid
          highlight-hover-row
          border
          resizable
          ref="dataTable"
          :data="tableData"
          :size="propSize || 'medium'"
          :style="propStyle"
          :height="propHeight || 550"
          :stripe="propStripe"
          :pager-config="tablePage"
          @page-change="handlePageChange"
          :expand-config="{
            accordion: true,
            lazy: true,
            loadMethod: loadContentMethod
          }"
        >
          <vxe-table-column type="seq" width="50" align="center" />
          <!-- <vxe-table-column type="checkbox" width="50" align="center" />-->
          <vxe-table-column type="expand" width="60" title="查看">
            <template v-slot:content="{ row }">
              <vxe-grid
                keep-source
                :data="row.childData"
                :edit-config="{ trigger: 'click', mode: 'row' , activeMethod: activeCellMethod}"
                @edit-closed="editClosedEvent"
                @edit-disabled="editDisabledEvent"
              >
                <vxe-table-column type="seq" tableData="50" align="center" fixed="left" />
                <vxe-table-column
                  v-for='column in row.childColumns'
                  :key='column.name'
                  :field='column.name'
                  :title='column.title'
                  align='center'
                  :width='column.width'
                  :edit-render='editRender(column)'
                >
                  <template slot-scope='scope'>
                    <div v-if='dateColumns.indexOf(column.name) > -1'>
                      {{ scope.row[column.name] | formatDate(formate) }}
                    </div>
                    <div v-else>{{ scope.row[column.name] }}</div>
                  </template>
                </vxe-table-column>
                <vxe-table-column title="操作" width="160" align="center" fixed="right" v-if="deleteButton">
                  <template v-slot="{ row }">
                    <template>
                      <el-button   type="danger" plain icon="el-icon-delete" @click="deleteMatr(row)"></el-button>
                    </template>
                  </template>
                </vxe-table-column>
              </vxe-grid>
            </template>
          </vxe-table-column>
          <vxe-table-column
            v-for="column in parentColumns"
            :key="column.name"
            :field="column.name"
            :title="column.label"
            align="center"
            :width="column.width"
          >
            <template slot-scope="scope">
              <div v-if="dateColumns.indexOf(column.name) > -1">{{ scope.row[column.name] | formatDate(formate) }}</div>
              <div v-else-if="strings.isBlank(column.dict)">{{ scope.row[column.name] }}</div>
              <div v-else v-html="utils.getDictLabel(scope.row[column.name], column.dict)" />
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" width="160" align="center" v-if="deleteButton">
            <template v-slot="{ row }">
              <template>
                <el-button type="danger" plain icon="el-icon-delete" @click="deletePackage(row)"></el-button>
              </template>
            </template>
          </vxe-table-column>
        </vxe-grid>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'PackSelect',
  data() {
    return {
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 50,
        align: 'left',
        pageSizes: [10, 20, 50, 100, 200, 500],
        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
        perfect: true
      },
      tableData: [],
      parentColumns: this.propParentColumns,
      dateColumns: ['expDate'],
      formate: 'yyyy-MM-dd',
      selectedRows: [],
      childColumns: this.propChildColumns,
      // preQueryWrapper: this.$newWrapper(),//已过时，属性传值实现较为复杂，且容易出bug，建议使用方法传值
      queryWrapper: null, // 新版查询条件
      deleteButton: !this.propReadonly
    }
  },
  props: {
    propReadonly: {
      type: Boolean,
      default: false
    },
    propParentColumns: {
      type: Array,
      required: false,
      default: () => [
        { label: '包名称', name: 'matrName' },
        { label: '数量', name: 'skuQty', width: 150 },
        { label: '金额', name: 'amount', width: 150 },
        { label: '生产日期', name: 'expDate', width: 150 },
        { label: '供应商', name: 'supplierName', width: 200 },
        { label: 'sn', name: 'sn', width: 200 }
      ]
    },
    propChildColumns: {
      type: Array,
      required: false,
      default: () => [
        { name: 'matrName', title: '耗材名称' },
        { name: 'matrSpec', title: '耗材规格' },
        { name: 'packageUnit', title: '包装单位' },
        { name: 'packageQty', title: '包装数量' },
        { name: 'skuQty', title: '单品数量' },
        { name: 'amount', title: '金额' }
      ]
    },
    propUrl: {
      type: String,
      default: () => '/base/pack_templet/list'
    },
    propHeight: {
      type: [String, Number],
      default: () => '500px'
    },
    propStyle: {
      type: String,
      default: () => 'width: 100%'
    },
    propStripe: {
      type: Boolean
    },
    propSize: {
      type: String
    },
    propFieldName: {
      //包所在业务表主键key
      type: String,
      default: null
    },
    propEditColumns: {
      //需要单元行编辑的数组
      type: Array,
      default: () => ['packageQty']
    }
  },
  mounted() {
    this.$nextTick(() => {
      // this.fetchData()
    })
  },
  methods: {
    getRows() {
      return this.tableData
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.fetchData()
    },
    setQueryWrapper(wrapper, autoReload = true) {
      this.queryWrapper = wrapper
      if (autoReload) {
        this.fetchData()
      }
    },
    async fetchData() {
      let params = {
        queryString: JSON.stringify(this.queryWrapper.queryConditions),
        currentPage: this.tablePage.currentPage,
        rowsPerPage: this.tablePage.pageSize
      }
      let resp = await this.$ajax.get(this.propUrl, {params})
      this.tableData = resp.data
      this.tablePage.total = +(resp.count ? resp.count : 0)
    },
    loadContentMethod({ row }) {
      return new Promise(resolve => {
        let wrapper = this.$newWrapper().eq(this.propFieldName, row.id)
        let params = {
          queryString: JSON.stringify(wrapper.queryConditions)
        }
        this.$ajax.get(this.propUrl, { params }).then(resp => {
          row.childColumns = this.childColumns
          row.childData = resp.data
          resolve()
        })
      })
    },
    editRender(column) {
      if (this.propEditColumns.indexOf(column.name) > -1) {
        return {
          name: '$input',
          props: { type: 'number', disabled: false}
        }
      } else {
        return null
      }
    },
    /*rowEditInputChange({ row, column }) {
      this.$emit('edit-input', { row, column })
    },
    rowEditSelectChange({ row, column }) {
      this.$emit('select-change', { row, column })
    },*/
    editClosedEvent({ row, column }) {
      let field = column.property
      // 判断单元格值是否被修改
      if (row[field] != column.model.value) {
        this.$emit('childRowEdit', {
          row,
          column
        })
      }
    },
    deleteMatr(row) {
      this.$emit('deleteMatr', row)
    },
    deletePackage(row) {
      this.$emit('deletePackage', row)
    },
    activeCellMethod({ column, columnIndex }) {
      if (this.propReadonly || !this.deleteButton) {
        return false
      }
      return true
    },
    editDisabledEvent({ row, column }) {
      this.utilMessage.error('非制单状态下禁止编辑')
    },
    setDeleteButton(show) {
      this.deleteButton = show
    }
  }
}
</script>

<style scoped></style>
